<template>
  <div class="navmain">
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
    >
      <!-- <NavMenu :navMenus="menu"></NavMenu> -->
      <div class="navMenu">
        <label v-for="(navMenu, index) in menu" :key="index">
          <el-menu-item
            v-if="navMenu.children == null"
            :key="navMenu.url"
            :index="navMenu.path"
            @click="clickMenu(navMenu)"
          >
            <i :class="'iconfont icon-' + navMenu.icon"></i>
            <span slot="title">{{ navMenu.label }}</span>
          </el-menu-item>
          <el-submenu
            v-if="navMenu.children"
            :key="navMenu.url"
            :index="navMenu.path"
            @click="clickMenu(navMenu)"
          >
            <template slot="title">
              <i :class="'iconfont icon-' + navMenu.icon"></i>
            </template>
            <el-menu-item-group style="background: rgba(0, 0, 0, 0)">
              <el-menu-item
                :index="subItem.path"
                v-for="(subItem, subIndex) in navMenu.children"
                :key="subIndex"
                @click="clickMenu(subItem)"
              >
                <span slot="title">{{ subItem.label }}</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </label>
      </div>
    </el-menu>
  </div>
</template>

<script>
import mixin from '@/api/mixin.js'
export default {
  mixins: [mixin],
  data() {
    return {
      isCollapse: true,
      isShow: false
    }
  },
  methods: {
    clickMenu(item) {
      this.$router.push({ name: item.name })
      this.$emit('getChild', this.isShow)
      // this.$store.commit('setPrint', {
      //   stationCode: '',
      //   sensorCode: '',
      //   isAlert: 'false'
      // })
      // if (item.name == 'Comprehensive') {
      //   this.$root.GisVal = 'renYuan'
      // } else if (item.name == 'Area') {
      //   this.$root.GisVal = 'jianKong'
      // }
    }
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.navmain {
  position: relative;
  width: 3.5rem;
  height: 100%;
  background: url(../../assets/images/img28.png) no-repeat;
  background-size: 100% 100%;
}
::v-deep .el-menu {
  background: rgba(0, 0, 0, 0);
  border-right: none;
  margin-left: 0.8rem;
}
::v-deep .el-menu-item {
  color: #ffffff;
  background: url(../../assets/images/img34.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 25px;
}
::v-deep .el-submenu {
  background: url(../../assets/images/img34.png) no-repeat;
  background-size: 100% 100%;
  margin-bottom: 25px;
}
// .el-menu-vertical-demo {
//   background-color: rgb(22, 36, 63);
// }
.el-menu {
  height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-item-group__title {
  display: none;
}
.el-menu-item i,
.el-submenu__title i {
  // color: #cfe0e8;
  font-size: 0.32rem;
  font-weight: 800;
  background-image: -webkit-linear-gradient(bottom, #02becf, #01afe1, #01a2f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.el-menu-item:hover {
  // background: rgb(32, 41, 47);
  border: 2px solid rgb(2, 175, 255);
  i {
    background-image: -webkit-linear-gradient(bottom, #fff, #fff, #fff);
  }
}
::v-deep .el-submenu__title:hover {
  background: rgba(0, 0, 0, 0);
  border: 2px solid rgb(2, 175, 255);
  i {
    background-image: -webkit-linear-gradient(bottom, #fff, #fff, #fff);
  }
}
::v-deep .el-menu--vertical {
  background: url(../../assets/images/img27.png) no-repeat;
  background-size: 100% 100%;
}
.el-menu-item i {
  font-size: 0.24rem;
  font-weight: 800;
  background-image: -webkit-linear-gradient(bottom, #10ebff, #01afe1, #01a2f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.el-menu-item {
  width: 0.8rem;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 18px;
  padding: 0 !important;
  text-align: center;
}

.el-menu-item {
  color: #fff;
  font-size: 0.14rem;
}
.el-submenu__icon-arrow {
  display: none;
}
.el-menu-item:hover {
  border: 2px solid rgb(2, 175, 255);
  i {
    background-image: -webkit-linear-gradient(bottom, #fff, #fff, #fff);
  }
}
.el-submenu__title:hover {
  i {
    background-image: -webkit-linear-gradient(
      bottom,
      #10ebff,
      #01afe1,
      #01a2f1
    );
  }
}
.navMenu {
  display: flex;
  height: 80%;
  margin: 10% 0;
  flex-direction: column;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  label {
    flex: 1;
    justify-content: space-between;
    width: 0.8rem;
  }
}
</style>
<style lang="scss">
.el-menu-item-group__title {
  display: none;
}
.el-menu--vertical {
  .el-menu--popup-right-start {
    background: url(../../assets/images/img27.png) no-repeat;
    background-size: 100% 100%;
  }
  .el-menu-item {
    background: none;
    height: 0.4rem;
    line-height: 0.4rem;
  }
  .el-menu-item:hover {
    border: none;
    color: #01afe1;
    font-weight: 600;
    font-size: 0.18rem;
  }
}
.el-submenu__icon-arrow {
  display: none;
}
.el-submenu__title i {
  font-size: 0.32rem;
  font-weight: 800;
  background-image: -webkit-linear-gradient(bottom, #10ebff, #01afe1, #01a2f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.el-submenu__title {
  width: 0.8rem !important;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 18px;
  padding: 0 !important;
  text-align: center;
}
</style>
